<template>
  <div
    class="suggest"
    ref="rootRef"
    v-loading:[loadingText]="loading"
    v-no-result:[noResultText]="noResult"
    :att="loading + noResult"
  >
    <ul class="suggest-list">
      <a v-if="singer" href="javascript:;" @click="selectSinger(singer)">
        <li
          class="suggest-item"
        >
          <div class="icon1">
            <i class="icon iconfont icon-user"></i>
          </div>
          <div class="name">
            <p class="text">{{ singer.name }}</p>
          </div>
        </li>
      </a>
      <a href="javascript:;" v-for="song in songs" :key="song.id" @click="selectSong(song)">
        <li
          class="suggest-item"
        >
          <div class="icon1">
            <i class="icon iconfont icon-musical-note"></i>
          </div>
          <div class="name">
            <p class="text">
              {{song.singer}}-{{song.name}}
            </p>
          </div>
        </li>
      </a>
      <a style="position: relative" href="javascript:;">
        <div
          class="suggest-item"
          v-loading:[loadingText]="pullUpLoading"
        >
        </div>
      </a>
    </ul>
  </div>
</template>

<script>
  import { ref, watch, computed, nextTick } from 'vue'
  import { search } from '@/service/search'
  import { processSongs } from '@/service/song'
  import usePullUpLoad from '@/components/search/use-pull-up-load'

  export default {
    name: 'suggest',
    props: {
      query: String,
      showSinger: {
        type: Boolean,
        default: true
      }
    },
    emits: ['select-song', 'select-singer'],
    setup(props, { emit }) {
      const singer = ref(null)
      const songs = ref([])
      const hasMore = ref(true)
      const page = ref(1)
      const loadingText = ref('')
      const noResultText = ref('抱歉，暂不搜索结果')
      const manualLoading = ref(false)

      const loading = computed(() => {
        return !singer.value && !songs.value.length && hasMore.value
      })

      const noResult = computed(() => {
        return !singer.value && !songs.value.length && !hasMore.value
      })

      const pullUpLoading = computed(() => {
        return isPullUpLoad.value && hasMore.value
      })

      const preventPullUpload = computed(() => {
        return loading.value || manualLoading.value
      })

      const { isPullUpLoad, rootRef, scroll } = usePullUpLoad(searchMore, preventPullUpload)

      watch(() => props.query, async (newQuery) => {
        if (!newQuery) {
          return
        }
        if (typeof searchFirst === 'function') {
          await searchFirst()
        }
      })

      async function searchFirst() {
        if (!props.query) {
          return
        }
        page.value = 1
        songs.value = []
        singer.value = null
        hasMore.value = true
        const result = await search(props.query, page.value, props.showSinger)
        songs.value = await processSongs(result.result.songs)
        singer.value = result.result.singer
        hasMore.value = result.result.hasMore
        await nextTick()
        await makeItScrollable()
      }

      async function searchMore() {
        if (!hasMore.value || !props.query) {
          return
        }
        page.value++
        const result = await search(props.query, page.value, props.showSinger)
        songs.value = songs.value.concat(await processSongs(result.result.songs))
        hasMore.value = result.result.hasMore
        await nextTick()
        await makeItScrollable()
      }

      async function makeItScrollable() {
        if (scroll.value.maxScrollY >= -1) {
          manualLoading.value = true
          await searchMore()
          manualLoading.value = false
        }
      }

      function selectSong(song) {
        emit('select-song', song)
      }

      function selectSinger(singer) {
        emit('select-singer', singer)
      }

      return {
        singer,
        songs,
        loadingText,
        noResultText,
        loading,
        noResult,
        pullUpLoading,
        selectSong,
        selectSinger,
        // pullUpLoad
        rootRef
      }
    }
  }
</script>

<style lang="scss" scoped>
.suggest {
  height: 100%;
  overflow: hidden;
  .suggest-list {
    //padding: 0 30px;
    a {
      padding: 0 30px;
      display: block;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
      color: $theme-color;
      .suggest-item {
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        padding-top: 10px;
        .icon1 {
          flex: 0 0 30px;
          width: 30px;
          .iconfont {
            font-size: 14px;
            color: $theme-color;
          }
        }
        .name {
          flex: 1;
          font-size: 14px;
          color: #333;
          overflow: hidden;
          .text {
            @include no-wrap();
          }
        }
      }
    }

  }
}
</style>
